<script setup lang="js">
import { onMounted } from 'vue';
import * as PIXI from 'pixi.js';

onMounted(() => {

    const app = new PIXI.Application({ resizeTo: window });

    document.getElementById('pixi-Filter-container').appendChild(app.view);

    // Inner radius of the circle
    const radius = 100;

    // The blur amount
    const blurSize = 32;

    PIXI.Assets.load('https://pixijs.com/assets/bg_grass.jpg').then((grassTexture) => {
        const background = new PIXI.Sprite(grassTexture);

        app.stage.addChild(background);
        background.width = app.screen.width;
        background.height = app.screen.height;

        const circle = new PIXI.Graphics()
            .beginFill(0xff0000)
            .drawCircle(radius + blurSize, radius + blurSize, radius)
            .endFill();

        circle.filters = [new PIXI.filters.BlurFilter(blurSize)];

        const bounds = new PIXI.Rectangle(0, 0, (radius + blurSize) * 2, (radius + blurSize) * 2);
        const texture = app.renderer.generateTexture(circle, PIXI.SCALE_MODES.NEAREST, 1, bounds);
        const focus = new PIXI.Sprite(texture);

        app.stage.addChild(focus);
        background.mask = focus;

        app.stage.eventMode = 'static';
        app.stage.hitArea = app.screen;
        app.stage.on('pointermove', (event) => {
            focus.position.x = event.global.x - focus.width / 2;
            focus.position.y = event.global.y - focus.height / 2;
        });
    });
})


</script>

<template>
    <div id="pixi-Filter-container"></div>
</template>

<style scoped></style>
